<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="__ADMIN__/css/font.css">
<link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
<script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
<script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
<style>
.layui-form-item .layui-form-label{
    width: 120px;
}
.layui-form-item .layui-textarea{
    width: 190px;
}
#tag-list span{
    cursor: pointer;
    margin:6px 4px 0
}
</style>
</head>
  
<body>
<div class="x-body" style="padding:0 10px 10px">
<form class="layui-form">
    <input type="hidden" name="id" value="{$info.id}">
  <table class="layui-table">
  <colgroup>
    <col width="200">
    <col width="600">
  </colgroup>
    
  <tbody>
    <tr>
        <td colspan="2" align="center" id="preview-td">
          <a href="{$info.pic_path}" target="_blank"><img src="{$info.pic_path}" style="max-width:100%;max-height:500px;"></a>
          <br><br>
          <input type="hidden" name="pic_path" value="{$info.pic_path}">
          <button type="button" class="layui-btn" id="uploadbtn">上传图片</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center" style="font-size: 19px;font-weight: bold;color: #000;">
            <input type="text" name="name" value="{$info.name}" autocomplete="off" placeholder="请输入活动名称..." class="layui-input">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            
            <!--<div id="tag-list">-->
            <!--    {foreach name="tagList" id="tag"}-->
            <!--    <span class="layui-badge">{$tag.name}<input type="hidden" name="tags[]" id="tags_{$tag.id}" value="{$tag.id}"></span>-->
            <!--    {/foreach}-->
            <!--</div>-->
            <div id="new-tag-list">
                {foreach name="tagAllList" id="tag"}
                <input type="checkbox" value="{$tag.id}" name="tags[]" id="tags_{$tag.id}" lay-skin="primary" title="{$tag.name}" {if condition="input('tag_id') == $tag.id"}checked="checked"{/if}>
                {/foreach}
            </div>
            <div style="margin-top:5px">
                <div class="layui-input-inline">
                    <input type="text" name="tag_name" id="tag_name" value="" autocomplete="off" placeholder="请输入风格名称并添加." class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-primary" lay-filter="add-tag" lay-submit>添加</button>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center" >
            提示：图片大小建议：750*1300
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center" >
            <button type="button" class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">提交</button>
            {if condition="$info.id"}
            <button type="button" class="layui-btn layui-btn-danger" lay-filter="del" lay-submit="">删除</button>
            {/if}
            
        </td>
    </tr>
  </tbody>
  </table>
     

</form>
</div>
<script>
layui.use(['form','layer','laydate','upload'], function(){
    $ = layui.jquery;
    var form = layui.form
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,upload = layui.upload;
    
    {foreach name="tagList" id="tag"}
    $("#tags_{$tag.id}").attr("checked", "checked");
    {/foreach}
    form.render("checkbox");
    
    form.on('submit(add)', function(data){
        $.ajax({
            type:'POST',
            dataType:'json',
            url: '{:url("operators/templateEdit")}',
            data:data.field,
            success:function(obj){
                layer.alert(obj.msg, {icon: obj.icon},function(){
                    if(obj.icon == 1){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        x_admin_father_reload();
                        
                    }
                });    
            }
        });
        return false;
    });
    
    form.on('submit(del)', function(data){
        let confirm = layer.confirm('是否要删除此模板吗', {
            btn: ['确定','否'] 
        }, function(){
            layer.close(confirm);
            $.ajax({
                type:'POST',
                dataType:'json',
                url: '{:url("operators/templateDel")}',
                data:data.field,
                success:function(obj){
                    layer.alert(obj.msg, {icon: obj.icon},function(){
                        if(obj.icon == 1){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            x_admin_father_reload();
                            
                        }
                    });    
                }
            });
        }, function(){
            
        });
        return false;
    });
    
    $('#tag-list').on('click','span',function(){
        let thiss = $(this);
        let confirm = layer.confirm('是否要删除此标签', {
            btn: ['确定','否'] 
        }, function(){
            layer.close(confirm);
            thiss.remove();
        }, function(){
            
        });
    })
    
    form.on('submit(add-tag)', function(data){
        if(!$('#tag_name').val())
            return false;
        
        var confirm = layer.confirm('是否要添加风格', {
            btn: ['确定','否'] 
        }, function(){
            $.post('{:url("operators/addTag")}',{tag_name:$('#tag_name').val()},function(data){
                layer.close(confirm);
                if(data.id)
                {
                    if($('#tags_'+data.id).length > 0){
                        layer.msg('已存在此风格，请直接勾选', {icon: 2});
                        return false;
                    }
                    //$('#tag-list').append('<span class="layui-badge">'+$('#tag_name').val()+'<input type="hidden" name="tags[]" id="tags_'+data.id+'" value="'+data.id+'"></span>');
                    $('#new-tag-list').append('<input type="checkbox" value="'+data.id+'" name="tags[]" id="tags_'+data.id+'" lay-skin="primary" title="'+$('#tag_name').val()+'" checked="checked">');
                    $('#tag_name').val('');
                    form.render("checkbox");
                }else
                    layer.msg('未知错误', {icon: 2});
            },'json');
        }, function(){
            
        });
        return false;
    });
    
    upload.render({
        elem: '#uploadbtn'
        ,url: '{:url("operators/uploadTemplatePic")}'
        ,accept: 'images'
        ,before: function(obj){
            obj.preview(function(index, file, result){
                $('#preview-td img').attr('src', result);
                $('#preview-td a').attr('href', result);
                $('#preview-td input').val(result);
            });
        }
        ,done: function(res){
            if(res.code == 0){
                $('#preview-td img').attr('src', res.pic_path);
                $('#preview-td a').attr('href', res.pic_path);
                $('#preview-td input').val(res.pic_path);
            }else{
                layer.alert(res.msg);
            }
        }
        ,error: function(){
            
        }
    
    });
});
</script>
</body>

</html>